<template>
  <DatePicker
    class="custom-datePicker"
    :value="value"
    :type="type"
    :format="format"
    :placeholder="placeholder"
    :transfer="transfer"
    :placement="placement"
    :disabled="disabled"
    :clearable="clearable"
    :readonly="readonly"
    @on-change="dateChange"></DatePicker>
</template>

<script>
export default {
  props: {
    value: {},
    type: {
      type: String,
      default: 'date'
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    transfer: {
      type: Boolean,
      default: true
    },
    placement: {
      type: String,
      default: 'bottom-start'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    format: {}
  },
  methods: {
    dateChange (date) {
      this.$emit('input', date)
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'common/scss/color';

.custom-datePicker {
  width: 100%;
  .ivu-input {
    background-color: $Color-formItemBg;
    border-radius: 0;
    color: $Color-text;
  }
}
</style>
